<template>
  <el-drawer
    class="self_drawer"
    v-model="showdrawer"
    direction="btt"
    :show-close="false"
    @close="cancel"
  >
    <template #header>
      <div class="drawer-header">
        <span class="title">
          <span>已关联数据表</span>
          <span class="total">共{{ total }}个</span>
        </span>

        <el-icon class="icon" @click="cancel"><Close /></el-icon>
      </div>
    </template>

    <el-main class="container bc-table" style="height: 100%" v-loading="loading">
      <el-table :data="objecInfo.tableData" style="width: 100%; height: 100%">
        <el-table-column prop="objectNameChn" label="表中文名称" />
        <el-table-column prop="objectName" label="表英文名称" />
        <el-table-column prop="dbType" label="存储库" />
        <el-table-column prop="dataPath" label="存储空间"> </el-table-column>
        <el-table-column prop="dataAmount" label="数据条数" />
        <el-table-column prop="busiTypeNames" label="所属目录">
           <template #default="scope">
                    <span>{{ scope.row.busiTypeNames ? scope.row.busiTypeNames.join(','): '--'  }}</span>
                  </template>
        </el-table-column>
      </el-table>
    </el-main>

    <template #footer>
      <div class="drawer-footer">
        <el-pagination
          v-model:current-page="tableField.pageNo"
          v-model:page-size="tableField.pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        />
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { getsjqdList } from "@/api/sjqd";
import { ref, reactive } from "vue";
import { Minxfun } from "@/utils/minxin";
const { handleSizeChange, handleCurrentChange, tableField, total,loading } = Minxfun();

const props = defineProps({
  currentRow: Object,
});

const emit = defineEmits(["close"]);

let showdrawer = ref(true);

let objecInfo = reactive({
  tableData: [],
});
const getTableData = async() => {
  try {
    loading.value = true
    let { data } = await getsjqdList({
      busiTypeCode: props.currentRow.busiTypeCode,
      ...tableField.value,
      pageNum: tableField.value.pageNo,
    });
    loading.value = false
    objecInfo.tableData = data.objectList;
    total.value = data.total || 0;
  } catch (e) {
    loading.value = false
    console.log(e);
  }
};

watch(
  () => props.currentRow,
  (newvla, oldval) => {
    getTableData();
  },
  { immediate: true,deep: true }
);
watch(tableField, (newvla, oldval) => {
  getTableData();
});

const cancel = () => {
  emit("close");
};
</script>

<style lang="scss">
.self_drawer {
  height: 80% !important;
}
.el-drawer__header {
  padding: 0 40px;
  margin-bottom: 0;
}
.el-drawer__body {
  padding: 0 40px;
  background: #f6f9ff;
}
.el-drawer__footer {
  background: #f6f9ff;
}
.drawer-header {
  width: 100%;
  height: 70px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #2263bf;
    .total {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      margin-left: 40px;
    }
  }
  .icon {
    font-size: 20px;
    cursor: pointer;
  }
}
.drawer-footer {
  text-align: right;
  padding: 0 40px;
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    .is-active {
      background: #2263bf !important;
    }
  }
  .el-pager li:hover {
    background: rgba(142, 191, 255, 0.72) !important;
    color: #2263BF !important;
  }

  .btn-prev {
    width: 84px !important;
    position: relative;
    padding-left: 16px;
    &::before {
      content: "<<";
      position: absolute;
      left: 8px;
      top: 0px;
    }
  }
  .btn-next {
    width: 84px !important;
    position: relative;
    padding-right: 16px;
    &::before {
      content: ">>";
      position: absolute;
      right: 8px;
      top: 0;
    }
  }
}
</style>